<?php
use_helper('I18N');
?>
<div class="breadcrumbs" id="breadcrumbs">
<script type="text/javascript" language="javascript">
    try {
        ace.settings.check('breadcrumbs', 'fixed')
    } catch(e) {
    }
    var datagrid = null;
    var datagridDetail = null;
    $(function() {
        datagrid = $("#datagrid").r9jasonDataTable({
            // online1DataTable extra params
            "idTr" : true, // assign <tr id='xxx'> from 1st columns array(aoColumns);
            "extraParam" : function(aoData) { // pass extra params to server

            },
            "reassignEvent" : function() { // extra function for reassignEvent when JSON is back from server
                reassignDatagridDetailEventAttr();
            },

            // datatables params
            "bLengthChange": true,
            "bFilter": false,
            "bProcessing": true,
            "bServerSide": true,
            "bAutoWidth": false,
            "sAjaxSource": "/finance/bonusDetailLogList",
            "sPaginationType": "full_numbers",
            "aaSorting": [
                [0,'desc']
            ],
            "aoColumns": [
                { "sName" : "commission.created_on",  "bSortable": true},
                { "sName" : "_DRB",  "bSortable": true, "fnRender": function ( oObj ) {
                    return "<a class='detailLink' ref='" + oObj.aData[0] + "' transaction='DRB' href='#'>" + oObj.aData[1] + "</a>";
                }},
                { "sName" : "_MP_RETURN",  "bSortable": true, "fnRender": function ( oObj ) {
                    return "<a class='detailLink' ref='" + oObj.aData[0] + "' transaction='MP RETURN' href='#'>" + oObj.aData[2] + "</a>";
                }},
                { "sName" : "_RELOAD_REWARD",  "bSortable": true, "fnRender": function ( oObj ) {
                    return "<a class='detailLink' ref='" + oObj.aData[0] + "' transaction='RELOAD REWARD' href='#'>" + oObj.aData[3] + "</a>";
                }},
                { "sName" : "_CONSUMER_REWARD",  "bSortable": true, "fnRender": function ( oObj ) {
                    return "<a class='detailLink' ref='" + oObj.aData[0] + "' transaction='CONSUMER REWARD' href='#'>" + oObj.aData[4] + "</a>";
                }},
                { "sName" : "SUB_TOTAL",  "bSortable": true}
            ]
        });
    }); // end function

    function reassignDatagridDetailEventAttr() {
        $(".detailLink").click(function(event) {
            event.preventDefault();

            $("#textboxQueryDate").val($(this).attr("ref"));
            $("#textboxQueryAction").val($(this).attr("transaction"));
            $("#divBonusDetail").show();
            datagridDetail.fnDraw();
        });
    }
</script>

    <ul class="breadcrumb">
        <li>
            <i class="icon-home home-icon"></i>
            <a href="#"><?php echo __('Bonus Commission') ?></a>
        </li>
    </ul>
    <!-- .breadcrumb -->

    <div class="nav-search" id="nav-search">
        <form class="form-search">
            <span class="input-icon">
                <input type="text" placeholder="Search ..." class="nav-search-input"
                       id="nav-search-input" autocomplete="off"/>
                <i class="icon-search nav-search-icon"></i>
            </span>
        </form>
    </div>
    <!-- #nav-search -->
</div>

<div class="page-content">
<!--<div class="page-header">
    <h1>
        <small>
            <i class="icon-double-angle-right"></i>
            <?php /*echo __('Bonus Commission') */?>
        </small>
    </h1>
</div>-->
<!-- /.page-header -->
<div class="row">
<div class="col-xs-12">
<!-- PAGE CONTENT BEGINS -->

<?php include_component('component', 'alert', array('param' => $sf_user->getAttribute(Globals::SESSION_DISTID, 0))) ?>

<div class="row">
<div class="space-6"></div>

<div class="col-xs-12">
    <h3 class="header smaller lighter green"><?php echo __('Bonus Commission') ?></h3>

    <div class="table-header">
        Results for "<?php echo __('Bonus Commission') ?>"
    </div>

    <div class="table-responsive">
        <table cellspacing="0" cellpadding="0">
            <colgroup>
                <col width="1%">
                <col width="30%">
                <col width="69%">
                <col width="1%">
            </colgroup>
            <tbody>
            <tr class="tbl_form_row_odd">
                <td>&nbsp;</td>
                <td colspan="2">
                    <br>
                    <div class="table-responsive">
                        <table class="table table-striped table-bordered table-hover" id="datagrid" border="0" width="100%">
                            <thead>
                            <tr>
                                <th><?php echo __('Date') ?></th>
                                <th><?php echo __('DRB') ?></th>
                                <th><?php echo __('MP Return') ?></th>
                                <th><?php echo __('Reload Reward') ?></th>
                                <th><?php echo __('Consumer Reward') ?></th>
                                <th><?php echo __('Sub Total') ?></th>
                            </tr>
                            </thead>
                        </table>
                    </div>

                    <div class="info_bottom_bg"></div>
                    <div class="clear"></div>
                    <br>

                    <script type="text/javascript" language="javascript">

                    $(function() {
                        datagridDetail = $("#datagridDetail").r9jasonDataTable({
                            // online1DataTable extra params
                            "idTr" : true, // assign <tr id='xxx'> from 1st columns array(aoColumns);
                            "extraParam" : function(aoData) { // pass extra params to server
                                aoData.push({ "name": "filterAction", "value": $("#textboxQueryAction").val() });
                                aoData.push({ "name": "filterDate", "value": $("#textboxQueryDate").val() });
                            },
                            "reassignEvent" : function() { // extra function for reassignEvent when JSON is back from server
                                reassignDatagridEventAttr();
                            },

                            // datatables params
                            "bLengthChange": true,
                            "bFilter": false,
                            "bProcessing": true,
                            "bServerSide": true,
                            "bAutoWidth": false,
                            "sAjaxSource": "/finance/bonusDetailList",
                            "sPaginationType": "full_numbers",
                            "aaSorting": [
                                [0,'desc']
                            ],
                            "aoColumns": [
                                { "sName" : "created_on",  "bSortable": true},
                                { "sName" : "credit", "bVisible" : true,  "bSortable": true},
                                { "sName" : "debit",  "bSortable": true},
                                { "sName" : "balance",  "bSortable": true},
                                { "sName" : "remark",  "bSortable": true}
                            ]
                        });
                    }); // end function

                    function reassignDatagridEventAttr() {
                        $("a[id=editLink]").click(function(event) {

                        });
                    }
                </script>
                <div id="divBonusDetail" style="display: none">
                    <input type="hidden" id="textboxQueryDate">
                    <input type="hidden" id="textboxQueryAction">

                    <div class="table-header">
                        <?php echo __('Bonus Details') ?>
                    </div>
                    <div class="table-responsive">
                        <table class="table table-striped table-bordered table-hover" id="datagridDetail" border="0" width="100%">
                            <thead>
                            <tr>
                                <th><?php echo __('Date') ?></th>
                                <th><?php echo __('In') ?></th>
                                <th><?php echo __('Out') ?></th>
                                <th><?php echo __('Balance') ?></th>
                                <th><?php echo __('Remarks') ?></th>
                            </tr>
                            </thead>
                        </table>
                    </div>
                </div>
                </td>
                <td>&nbsp;</td>
            </tr>

            </tbody>
        </table>
    </div>
</div>

<div class="vspace-sm"></div>

<!-- /span -->
</div>
<!-- /row -->

<div class="hr hr32 hr-dotted"></div>

<!-- /row -->

<!-- PAGE CONTENT ENDS -->
</div>
<!-- /.col -->
</div>
<!-- /.row -->
</div><!-- /.page-content -->